<script setup lang="ts">
import {onMounted, ref} from "vue";
import {showToast} from "vant";
import {useRoute, useRouter} from "vue-router";
import {getUserInfoApi} from "@/api/userApi.ts";
import {useI18n} from "vue-i18n";
import {useStore} from "vuex";
import {getWebsiteConfig} from "@/api/homeApi.ts";
import {withdrawApi} from "@/api/withdrawApi.ts";
const router = useRouter();
const {t} = useI18n()
const store = useStore();
const route = useRoute();

const type = route.params.type;

const realMoney = ref(0);

const websiteConfig = ref([]);
const fetchWebsiteConfig = () => {
  getWebsiteConfig().then(res => {
    websiteConfig.value = res.data;
  })
}

const form = ref({
  money:'',
  password:''
});

const submit = () => {

  if (form.value.money == '') {
    showToast(t('placeholder.withdrawMoneyEmpty'));
    return false;
  }

  if (form.value.password == '') {
    showToast(t('placeholder.payPasswordEmpty'));
    return false;
  }

  if (type == '') {
    showToast(t('placeholder.withdrawTypeEmpty'));
    return false;
  }

  store.state.loadingState = true;
  withdrawApi({
    money: form.value.money,
    password: form.value.password,
    type:type
  }).then(res => {
    showToast(res.msg);
    store.state.loadingState = false;
    if (res.code == 0) {
      router.push({name: 'record'})
    }
  })
}

const user = ref([]);
const fetchUserData = () => {
  getUserInfoApi().then(res => {
    user.value = res.data;
  })
}

const handleInput = (event: Event) => {
  const value = parseFloat((event.target as HTMLInputElement).value);
  if(value > 0){
    realMoney.value = parseFloat(form.value.money) - (parseFloat(form.value.money) * parseFloat(websiteConfig.value.withdraw_fee / 100));
  }
};

onMounted(()=>{
  fetchWebsiteConfig();
  fetchUserData();
})
</script>

<template>
  <div class="withdraw">
    <div class="form">
      <div class="field-item">
        <label>{{ $t('withdraw.type') }}</label>
        <span v-if="type == 'bankCard'">{{ $t('withdraw.bankCard') }}</span>
        <span v-if="type == 'usdt'">Usdt</span>
      </div>
      <div class="field-item">
        <label>{{ $t('withdraw.money') }}</label>
        <input type="text" :placeholder="$t('placeholder.withdrawMoneyEmpty')" v-model="form.money" @input="handleInput"/>
      </div>
      <div class="field-item">
        <label>{{ $t('withdraw.password') }}</label>
        <input type="password" :placeholder="$t('placeholder.payPasswordEmpty')" v-model="form.password"/>
      </div>
    </div>

    <div class="tip">
      <span>{{ $t('withdraw.tip') }}&nbsp;&nbsp;{{ $t('currency.symbol') }}{{ websiteConfig.withdraw_min_money }}</span>
      <div class="price">
        <span>{{ $t('withdraw.balance') }}{{ user.balance }}</span>
        <span>{{ $t('withdraw.fee') }}<span class="price-tip">{{ websiteConfig.withdraw_fee }}%</span></span>
        <span>{{ $t('withdraw.realMoney') }}<span class="price-tip">{{ realMoney }}</span></span>
      </div>
    </div>

    <div class="btn" @click="submit()">
      <span>{{ $t('withdraw.btn') }}</span>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../../less/withdraw.less";
</style>